<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="1000px">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
    <el-row>
      <el-col :span="12">
    <el-form-item label="联系名称" prop="name">
      <el-input v-model="dataForm.name" placeholder="请输入联系人名称"></el-input>
    </el-form-item>
      </el-col>
       <el-col :span="12">
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="dataForm.email" placeholder="请输入邮箱"></el-input>
    </el-form-item>
    </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
    <el-form-item label="联系电话" prop="phone">
      <el-input v-model="dataForm.phone" placeholder="请输入联系人电话" maxlength="11"></el-input>
    </el-form-item>
     </el-col>
       <el-col :span="12">
    <el-form-item label="真实姓名" prop="realName">
      <el-input v-model="dataForm.realName" placeholder="请输入真实姓名"></el-input>
    </el-form-item>
     </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
    <el-form-item label="身份证号" prop="idNo">
      <el-input v-model="dataForm.idNo" placeholder=" 请输入身份证号" maxlength="18"></el-input>
    </el-form-item>
    </el-col>
       <el-col :span="12">
    <el-form-item label="出生日期" prop="birthday">
      <el-date-picker type="date" placeholder="选择日期" v-model="dataForm.birthday" style="width: 100%;"></el-date-picker>
    </el-form-item>
    </el-col>
    </el-row>
     <el-row>
      <el-col :span="8">
    <el-form-item label="性别" prop="sex">
      <el-radio-group v-model="dataForm.sex">
              <el-radio :label="0">男</el-radio>
              <el-radio :label="1">女</el-radio>
            </el-radio-group>
    </el-form-item>
     </el-col>
       <el-col :span="8">
          <el-form-item label="状态:">
            <el-radio-group v-model="dataForm.status">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="0">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
     </el-col>
      <el-col :span="8">
           <el-form-item label="选择分组:" prop="options">
             <el-select
    v-model="dataForm.groupId"
    filterable
    allow-create
    default-first-option
    placeholder="请选择标签">
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select>
          </el-form-item>
     </el-col>
    </el-row>
      <el-row>
      <el-col :span="6">
    <el-form-item label="国家" prop="livingCountry">
       <el-select
    v-model="dataForm.livingCountry"
    filterable
    allow-create
    default-first-option
    placeholder="请选择标签">
    <el-option
      v-for="item in countrylist"
      :key="item.id"
      :label="item.name"
      :value="item.name">
    </el-option>
  </el-select>
    </el-form-item>
    </el-col>
       <el-col :span="6">
    <el-form-item label="省" prop="livingState">
       <el-select
    v-model="dataForm.livingState"
    filterable
    allow-create
    default-first-option
    placeholder="请选择标签">
    <el-option
      v-for="item in provinceList"
      :key="item.id"
      :label="item.name"
      :value="item.name">
    </el-option>
  </el-select>
    </el-form-item>
    </el-col>
       <el-col :span="6">
    <el-form-item label="市" prop="livingCity">
       <el-select
    v-model="dataForm.livingCity"
    filterable
    allow-create
    default-first-option
    placeholder="请选择标签">
    <el-option
      v-for="item in cityList"
      :key="item.id"
      :label="item.name"
      :value="item.name">
    </el-option>
  </el-select>
    </el-form-item>
    </el-col>
       <el-col :span="6">
    <el-form-item label="区" prop="livingRegion">
       <el-select
    v-model="dataForm.livingRegion"
    filterable
    allow-create
    default-first-option
    placeholder="请选择标签">
    <el-option
      v-for="item in regionList"
      :key="item.id"
      :label="item.name"
      :value="item.name">
    </el-option>
  </el-select>
    </el-form-item>
      </el-col>
    </el-row>
     <!-- <el-form-item label="头像" prop="headImgs">
            <el-input v-model="dataForm.headImgs" v-if="false"></el-input>
            <el-upload
              class="avatar-uploader"
              ref="upload"
              list-type="picture-card"
              :show-file-list="false"
              action="/index/upload"
              :before-upload="beforeUpload"
              :on-change="handleChange"
              :auto-upload="false"
              :http-request="uploadFile"
              :data="dataForm"
              style="margin-left: 40px; padding-top: 30px"
            >
              <img
                v-if="dataForm.logo"
                :src="dataForm.logo"
                class="avatar"
                style="width: 140px"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item> -->

    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        dataForm: {
          id: 0,
          name: '',
          email: '',
          phone: '',
          status: '',
          groupId:'',
          realName: '',
          idNo: '',
          birthday: '',
          sex: '',
          headImgs: '',
          livingCountry: '中国',
          livingState: '四川省',
          livingCity: '成都市',
          livingRegion: '成华区',
          addUser: '',
          addTime: '',
          editUser: '',
          editTime: ''
        },
        countrylist: [{
          id:1,
          name:'中国'
        }], //存放街道数据集合
         provinceList: [{
          id:1,
          name:'四川省'
        }], // 存放省数据集合
				cityList: [{
          id:1,
          name:'成都市'
        }], // 存放市数据集合
				regionList: [{
          id:1,
          name:'成华区'
        }], // 存放区数据集合
        options:[],
        dataRule: {
          name: [
            { required: true, message: '联系人名称不能为空', trigger: 'blur' }
          ],
          email: [
            { required: true, validator: this.checkEmail, trigger: 'blur' }
          ],
          phone: [
          { required: true, validator: this.contactNumber, trigger: "blur" },
        ],
          realName: [
            { required: true, message: '真实姓名不能为空', trigger: 'blur' }
          ],
          idNo: [
            { required: true,validator: this.idCard, trigger: 'blur' }
          ],
          birthday: [
            { required: true, message: '出生日期不能为空', trigger: 'blur' }
          ],
          // headImgs: [
          //   { required: true, message: '头像地址不能为空', trigger: 'blur' }
          // ],

        }
      }
    },
    created(){

    },
    methods: {
      init (id) {
        this.dataForm.id = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          this.dataForm.sex=1
          this.dataForm.status=1
          this.group()
          if (this.dataForm.id) {
            this.$http({
              url: this.$http.adornUrl(`/smsgcontact/info/${this.dataForm.id}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.name = data.smsgContact.name
                this.dataForm.email = data.smsgContact.email
                this.dataForm.phone = data.smsgContact.phone
                this.dataForm.status = data.smsgContact.status
                this.dataForm.groupId = data.smsgContact.groupId
                this.dataForm.realName = data.smsgContact.realName
                this.dataForm.idNo = data.smsgContact.idNo
                this.dataForm.birthday = data.smsgContact.birthday
                this.dataForm.sex = data.smsgContact.sex
                this.dataForm.headImgs = data.smsgContact.headImgs
                this.dataForm.livingCountry = data.smsgContact.livingCountry
                this.dataForm.livingState = data.smsgContact.livingState
                this.dataForm.livingCity = data.smsgContact.livingCity
                this.dataForm.livingRegion = data.smsgContact.livingRegion
                this.dataForm.addUser = data.smsgContact.addUser
                this.dataForm.addTime = data.smsgContact.addTime
                this.dataForm.editUser = data.smsgContact.editUser
                this.dataForm.editTime = data.smsgContact.editTime

              for (var i = 0; i < this.options.length; i++) {
              if (this.options[i].id === data.smsgContact.groupId) {
                this.dataForm.groupId = this.options[i].id;
              } else {
              }
            }
              }
            })
          }
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/smsgcontact/${!this.dataForm.id ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                'id': this.dataForm.id || undefined,
                'name': this.dataForm.name,
                'email': this.dataForm.email,
                'phone': this.dataForm.phone,
                'status': this.dataForm.status,
                'groupId' : this.dataForm.groupId,
                'realName': this.dataForm.realName,
                'idNo': this.dataForm.idNo,
                'birthday': this.dataForm.birthday,
                'sex': this.dataForm.sex,
                'headImgs': this.dataForm.headImgs,
                'livingCountry': this.dataForm.livingCountry,
                'livingState': this.dataForm.livingState,
                'livingCity': this.dataForm.livingCity,
                'livingRegion': this.dataForm.livingRegion,
                'addUser': this.dataForm.addUser,
                'addTime': this.dataForm.addTime,
                'editUser': this.dataForm.editUser,
                'editTime': this.dataForm.editTime
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      },
      /**
   * 身份证号码校验
   */
    idCard(rule, value, callback) {
      if (value === "") {
        callback(new Error("身份证号不能为空"));
      }
      else if(value && (!(/\d{17}[\d|x]|\d{15}/).test(value) || (value.length !== 15 && value.length !== 18))) {
        callback(new Error('身份证号码不符合规范'))
      } else {
        callback()
      }
    },
        /**
     * 邮箱校验
     */
    checkEmail(rule, value, callback) {
    const mailReg = (/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/)
    if (!value) {
      return callback(new Error("邮箱不能为空"))
    }
    setTimeout(() => {
      if (mailReg.test(value)) {
        callback()
      } else {
        callback(new Error("请输入正确的邮箱格式"))
      }
    }, 100)
  },
      /**
     * 手机号码校验
     */
    contactNumber(rule, value, callback) {
      if (value === "") {
        callback(new Error("手机号不能为空"));
      } else if (
        value &&
        (!/^[1][34578]\d{9}$/.test(value) ||
          !/^[1-9]\d*$/.test(value) ||
          value.length !== 11)
      ) {
        callback(new Error("手机号格式错误"));
      } else {
        callback();
      }
    },

    uploadFile(file) {
      this.formDate.append("file", file.file);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dataForm.logo = "";
    },

    handleChange(file, fileList) {
      this.dataForm.logo = URL.createObjectURL(file.raw);
    },

    beforeUpload(file) {
      return true;
    },
    group(){
       this.$http({
          url: this.$http.adornUrl('/smsgcontact/group'),
          method: 'get',
          params: this.$http.adornParams({
            'key': this.dataForm.key
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.options = data.list
            console.log(data.list[0].id+"--------")
            var id=data.list[0].id
            this.dataForm.groupId = this.options[0].id;
          } else {
          }
        })
    }
    }
  }
</script>
